<template>
	<view class="jh-img">
		<image v-if="!imgError" class="img" :mode="mode" :src="src" @error="handleImageError"></image>
		<z-paging-empty-view v-else :isLoadFailed="true" :emptyViewFixed="false" emptyViewText="图片加载失败~">
		</z-paging-empty-view>
	</view>
</template>

<script>
	export default {
		name: "pf-img",
		props: {
			src: {
				type: String,
				default: function() {
					return ''
				}
			},
			mode: {
				type: String,
				default: function() {
					return 'widthFix'
				}
			}
		},
		data() {
			return {
				imgError: false
			};
		},
		methods: {
			handleImageError() {
				this.imgError = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jh-img {
		.img {
			width: 100%;
		}
	}
</style>
